<template>
  <div>
    <div class="header-tip">
      <!-- 模糊查询 -->
      <div class="check">
        <i-form
          :model="formItem"
          class="input-tip"
        >
          <Form-item label="">
            <i-input
              :value.sync="formItem.input"
              placeholder="请输入账号"
            ></i-input>
          </Form-item>
        </i-form>
      </div>
      <div>
        <Button
          class="buttonCheck"
          type="info"
          @click="toCheck"
        >查找</Button>
      </div>
    </div>

    <Table
      border
      :columns="addUser"
      :data="list"
    >
      <template
        slot-scope="{ row }"
        slot="account"
      >
        <strong>{{ row.account }}</strong>
      </template>
      <template
        slot-scope="{ row }"
        slot="realname"
      >
        <strong>{{ row.realname }}</strong>
      </template>
      <template
        slot-scope="{ row }"
        slot="sex"
      >
        <span v-if="row.sex=='1'">男</span>
        <span v-if="row.sex=='0'">女</span>
      </template>
      <template
        slot-scope="{ row }"
        slot="register_time"
      >
        <span>{{ row.register_time | dateformat('YYYY-MM-DD') }}</span>
      </template>
      <template
        slot-scope="{ row, index }"
        slot="action"
      >
        <Button
          type="primary"
          size="small"
          style="margin-right: 8px"
          @click="show(index)"
        >编辑</Button>
        <Button
          type="error"
          size="small"
          style="margin-right: 8px"
          @click="remove(index)"
        >删除</Button>
        <Button
          type="warning"
          size="small"
          @click="toParent(index)"
        >父母</Button>
      </template>
    </Table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formItem: {
        input: "",
      },
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        account: undefined,
        nackname: undefined,
        realname: undefined,
        sort: "+id",
      },
      addUser: [
        {
          title: "账号",
          key: "account",
        },
        {
          title: "昵称",
          key: "nackname",
        },
        {
          title: "年龄",
          key: "age",
        },
        {
          title: "注册时间",
          slot: "register_time",
          width: 150,
        },
        {
          title: "邮箱",
          key: "email",
          width: 150,
        },
        {
          title: "操作",
          slot: "action",
          width: 250,
          align: "center",
        },
      ],
      list: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取数据
    getList() {
      this.listLoading = true;
      // 发起请求
      this.$http({
        url: "/getUserList", // 请求地址
        method: "get", // 设置请求方式
        params: this.listQuery, // 把注册参数放进请求中
      })
        .then((e) => {
          // 处理请求返回的结果
          console.log(e.data);
          this.list = e.data.user;
          // this.total = e.data.total
          // this.listLoading = false
        })
        .catch((e) => {
          // 处理请求发生的异常
          console.log(e);
        });
    },
    // 模糊查询
    likeQuerying() {
      const account = this.listQuery.account;
      const nackname = this.listQuery.nackname;

      console.log(account);
      console.log(nackname);
      console.log(status);
      // 发起请求
      this.$http({
        url: "/likeQuerying", // 请求地址
        method: "post", // 设置请求方式
        data: {
          account: account,
          nackname: nackname,
          status: [0, 3],
        }, // 把注册参数放进请求中
      })
        .then((e) => {
          // 处理请求返回的结果
          console.log(e.data);
          this.list = e.data;
          this.listLoading = false;
        })
        .catch((e) => {
          // 处理请求发生的异常
          console.log(e);
        });
    },
    toCheck() {
      console.log("编辑");
    },

    resetForm() {
      this.addUser = {
        id: undefined,
        account: "",
        name: "",
        age: "",
        realname: "",
        sex: "",
        email: "",
      };
    },
    show(index) {
      this.$Modal.info({
        title: "修改",
      });
    },
    toParent(index) {
      let user_id = this.list[index].id;
      this.$router.push({
        name: "parent",
        params: {
          user_id,
        },
      });
    },
    remove(index) {
      let id = this.list[index].id;

      this.$Modal.confirm({
        title: "确认对话框标题",
        content: "此操作将永久删除该用户, 是否继续?",
        onOk: () => {
          //  this.$Message.info('点击了确定')
          this.$http({
            url: "/deleteUser/" + id, // 请求地址
            method: "get", // 设置请求方式
            data: {},
          }).then(() => {
            this.dialogFormVisible = false;
            this.list.splice(index, 1);
            this.total = this.total - 1;
            this.$Message.info("删除成功");
          });
        },
        onCancel: () => {
          // this.$Message.info('点击了取消')
        },
      });
    },
    // 增加用户
    toAdd() {
      console.log("增加用户");
      this.resetForm();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      // 关闭时清除
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
      // this.$router.replace({
      //   path: 'add'
      // })
    },
  },
};
</script>

<style scoped>
.header-tip {
  display: flex;
  align-items: center;
  text-align: center;
}
.input-tip {
  margin-top: 7px;
}
.buttonCheck {
  margin-bottom: 15px;
  margin-left: 15px;
}
.buttonAdd {
  margin-bottom: 20px;
}
.header .check {
  margin-bottom: 10px;
}
</style>
